<template>
	<view class="project-detail-view" v-if="info.id">
		<view class="content-box project-info">
			<!-- <view class="fx-center info-tips" v-if="noticeText">
				<image src="/static/laba_grey.png" mode="heightFix"></image>
				<view class="">{{noticeText}}</view>
			</view> -->
			<view class="fx-center info-tips" v-if="noticeArr.length>0">
				<image src="/static/laba.png" mode="heightFix"></image>

				<swiper autoplay circular vertical :interval="3000" :duration="500" style="height: 72rpx;width: 100%;">
					<swiper-item v-for="(item,index) in noticeArr" :key="index">
						<view style="line-height: 72rpx;">{{item.text}}</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="info-project fx-center">
				<image :src="info.cover_url" mode="" class="project-img"></image>
				<view class="">
					<view class="project-name">{{info.name}}</view>
					<view class="fx-center">
						<view class="fx-center" style="margin-right: 28rpx;" v-if="info.apply_users.length>0">
							<image :src="item.avatar_url" mode="" class="avtr-img" v-for="(item,i) in info.apply_users"
								:key="item.id" v-show="i<3"></image>
						</view>

						<view class="avtr-total"><text
								v-if="info.apply_users.length>0">等{{info.actual_man}}人想合作｜</text>招募进度
							{{info.apply_rate}}%
						</view>
					</view>
					<view class="fx-center tags-box">
						<view class="fx-center tag-item tag-item1" v-if="info.pl_safety">
							<image src="/static/bz_icon.png" mode="heightFix" class="bz-icon"></image>
							<view class="">平台保障</view>
						</view>
						<view class="tag-item tag-item2" v-for="tag in info.tags" :key="tag.id">{{tag.name}}</view>
						<!-- <van-tag text-color="#FF5C00" color="rgba(255,92,0,0.1)" v-if="info.pl_safety">
							平台保障
						</van-tag>
						<van-tag text-color="#5C5F66" color="#F1F3F6" style="margin-left: 8rpx;"
							v-for="tag in info.tags" :key="tag.id">{{tag.name}}</van-tag> -->
					</view>
				</view>
			</view>
			<view class="project-content">{{info.summary}}</view>
			<view class="fx-center-between project-btns">
				<view class="profit">预计收益 {{info.est_min_earn}}-{{info.est_max_earn}}/月</view>
				<van-button color="#FF5C00" :custom-style="btnStyle" @click="showDialog=true"
					v-if="info.state===null">申请项目</van-button>
				<van-button color="#FF5C00" :custom-style="btnStyle" v-if="info.state ===0 || info.state ===1"
					@click="toLearn">继续学习</van-button>
				<van-button color="#FF5C00" :custom-style="btnStyle" disabled v-if="info.state===3">合作中</van-button>
				<van-button color="#FF5C00" :custom-style="btnStyle" disabled v-if="info.state === 2">考核审核中</van-button>
				<van-button color="#FF5C00" :custom-style="btnStyle" @click="toRestudy"
					v-if="info.state === 4">重新考核</van-button>
				<!-- 合作中、继续学习、申请项目、考核审核中、重新考核 -->
			</view>
		</view>

		<view class="fx-center">
			<view class="tab-item" :class="tabIndex===1 ? 'tab-item-check' : ''" @click="changeTab(1)">概览</view>
			<view class="fx-center tab-item" :class="tabIndex===2 ? 'tab-item-check' : ''" @click="changeTab(2)">
				<image src="/static/suo.png" mode="widthFix" v-if="info.state!==3"></image>
				<view class="">项目文档</view>
			</view>
			<view class="fx-center tab-item" :class="tabIndex===3 ? 'tab-item-check' : ''" @click="changeTab(3)">
				<image src="/static/suo.png" mode="widthFix" v-if="info.state===null"></image>
				<view class="">培训课程</view>
			</view>
		</view>
		<template v-if="tabIndex===1">
			<detail-tab1-vue :info="info"></detail-tab1-vue>
		</template>
		<template v-if="tabIndex===2">
			<detail-tab2-vue :list="docList"></detail-tab2-vue>
		</template>
		<template v-if="tabIndex===3">
			<view class="detail-tab3-view">
				<c-step :stepList="lessonArr" :pid="info.id"></c-step>
			</view>
		</template>
		<van-dialog use-slot title="" :show="showDialog" :showConfirmButton="false" customStyle="border-radius: 4rpx;">
			<view style="height: 500rpx;">
				<view class="tip-dialog-box">
					<view class="tip-text">轻钉轻创是一个免费服务平台，学习和执行，是我们对合作伙伴仅有的考核</view>
					<van-button color="#4078E5" block custom-style="height: 64rpx;"
						@click="applyLearn">申请并学习</van-button>
					<view class="img-box fx-center-center">
						<image src="/static/cha.png" mode="widthFix" class="cha-icon" @click="showDialog=false"></image>
					</view>

				</view>
			</view>
		</van-dialog>
		<c-tip-dialog ref="tipRef" title="项目申请中，请耐心等待，审核通过后将会短信通知！"></c-tip-dialog>
	</view>
</template>

<script>
	import detailTab1Vue from './detail-tab1.vue';
	import detailTab2Vue from './detail-tab2.vue';
	export default {
		components: {
			detailTab1Vue,
			detailTab2Vue
		},
		data() {
			return {
				tabIndex: 1,
				showDialog: false,
				info: {},
				btnStyle: 'width: 216rpx;height: 64rpx;',
				lessonArr: [], //培训课程
				timer: null,
				noticeArr: [],

				docList: [], //项目文档

				pid: null, //项目id
				isFirst: true
			};
		},
		onLoad(e) {
			if (e.id) {
				this.pid = e.id
				this.getDetail()
			}
		},
		onHide() {
			if (this.timer) {
				clearInterval(this.timer)
				this.timer = null
			}
		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer)
				this.timer = null
			}
		},
		onShow() {
			this.timer = setInterval(() => {
				if (this.info.id) {
					this.getNotice()
				}
			}, 5000)

			if (this.tabIndex === 3) {
				this.getCourse()
			}
			if (!this.isFirst) {
				this.getDetail()
			}
		},
		methods: {
			// 项目详情
			getDetail() {
				this.$api.requst('/gwc/projects/id', {
					id: this.pid
				}).then((res) => {
					// state字段 0-待学习，1-学习中，2-审核中，3-已通过，4-未通过
					// 待学习和学习中，可以继续学习，已通过就表示合作中，未通过就可以重新学习
					this.info = res.data
					this.isFirst = false
					this.getNotice()
				})
			},
			// 获取提示信息
			getNotice() {
				this.$api.requst(`/gwc/projects/${this.info.id}/notice`, {
					id: this.info.id
				}).then((res) => {
					// this.noticeText = res.data ? (res.data.text || '') : ''
					this.noticeArr = res.data
				})
			},
			// 申请项目
			applyLearn() {
				if (this.$store.state.islogin) {
					this.$api.requst(`/gwc/projects/${this.info.id}/apply`, {
						id: this.info.id
					}, 'POST').then((res) => {
						this.showDialog = false
						this.$api.showError(res.msg)
						setTimeout(() => {
							// this.getDetail(this.info.id)
							this.toLearn()
						}, 1000)
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			// tab切换
			changeTab(index) {
				if (index === 2 && this.info.state !== 3) {
					this.$api.showError('合作后才能查看！')
				} else if (index === 3 && this.info.state === null) {
					this.$api.showError('开始学习后才能查看！')
				} else {
					this.tabIndex = index
					if (this.tabIndex === 2) {
						this.getDoc()
					}
					if (this.tabIndex === 3) {
						this.getCourse()
					}
				}
			},
			// 获取培训课程
			getCourse() {
				this.$api.requst(`/gwc/projects/${this.info.id}/course`, {
					id: this.info.id
				}).then((res) => {
					this.lessonArr = res.data.chapters
				})
			},
			// 获取项目文档
			getDoc(id) {
				this.$api.requst(`/gwc/projects/${this.info.id}/document`, {
					id: this.info.id
				}).then((res) => {
					this.docList = res.data
				})
			},
			// 继续学习
			toLearn() {
				uni.navigateTo({
					url: '/pages/workbench/trainCourse/trainCourse?id=' + this.info.id
				})
			},
			// 重新学习
			toRestudy() {
				this.$api.requst(`/gwc/projects/restudy`, {
					id: this.info.id
				}, 'POST').then((res) => {
					this.$api.showError('提交成功！')
					setTimeout(() => {
						this.toLearn()
					}, 500)

				})
			}
		}
	}
</script>

<style lang="scss">
	.project-detail-view {
		padding-bottom: 50rpx;
		box-sizing: border-box;

		.content-box {
			background: #FFFFFF;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			margin: 0 26rpx;
			padding: 32rpx 24rpx;
		}

		.project-info {
			margin-top: 12rpx;
			padding-top: 0;

			.info-tips {
				font-size: 26rpx;
				color: #5C5F66;
				border-bottom: 1rpx solid #E2E2E2;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 8rpx;
				}
			}

			.info-project {
				padding: 32rpx 0 28rpx;

				.project-img {
					width: 176rpx;
					height: 176rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					margin-right: 32rpx;
					flex-shrink: 0;
				}

				.project-name {
					font-weight: bold;
					font-size: 38rpx;
					color: #161616;
					margin-bottom: 16rpx;
				}

				.avtr-img {
					width: 44rpx;
					height: 44rpx;
					border-radius: 50%;
					margin-right: -14rpx;
				}

				.avtr-total {
					font-size: 22rpx;
					color: #5C5F66;
				}

				.tags-box {
					flex-wrap: wrap;

					.tag-item {
						flex-shrink: 0;
						font-size: 20rpx;
						padding: 4rpx 8rpx;
						margin-right: 8rpx;
						margin-top: 12rpx;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
					}

					.tag-item1 {
						background-color: rgba(255, 92, 0, 0.1);
						color: #FF5C00;
					}

					.tag-item2 {
						background-color: #F1F3F6;
						color: #5C5F66;
					}
				}

				.bz-icon {
					width: 23rpx;
					height: 27rpx;
					margin-right: 8rpx;
					flex-shrink: 0;
				}
			}

			.project-content {
				font-size: 26rpx;
				padding-bottom: 32rpx;
				border-bottom: 1rpx solid #E2E2E2;
			}

			.project-btns {
				margin-top: 40rpx;

				.profit {
					font-weight: bold;
					font-size: 30rpx;
					color: #FF5C00;
				}
			}
		}

		.tab-item {
			font-size: 32rpx;
			color: #5C5F66;
			padding: 34rpx 24rpx 32rpx;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 8rpx;
			}
		}

		.tab-item-check {
			font-weight: bold;
			color: #161616;
		}

		.detail-tab3-view {
			margin: 0 24rpx;
		}
	}

	.tip-dialog-box {
		padding: 48rpx 32rpx;
		position: relative;
		background-color: #fff;
		border-radius: 4rpx;

		.tip-text {
			font-size: 30rpx;
			color: #161616;
			padding-bottom: 32rpx;
			text-align: center;
		}

		.img-box {
			text-align: center;
			position: absolute;
			margin-top: 100rpx;
			left: 0;
			right: 0;

			.cha-icon {
				width: 56rpx;
				height: 56rpx;
				z-index: 3000;
			}
		}

	}

	::v-deep .van-cell {
		padding: 30rpx 0 !important;
	}

	::v-deep .van-cell:after {
		left: 0 !important;
		right: 0 !important;
	}

	::v-deep .van-cell__title {
		font-size: 30rpx;
		color: #333333;
	}

	::v-deep .van-dialog {
		overflow: auto !important;
		background-color: transparent !important;
	}

	::v-deep .van-popup {
		overflow-y: inherit !important;
	}
</style>